<template>
  <el-drawer
    :wrapper-closable="false"
    :title="id == 0 ? '新增' : '编辑'"
    :size="500"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col px-[16px] pb-[90px] pr-[4px]">
      <div class="flex min-h-0 flex-1 flex-col overflow-auto">
        <div>
          <div class="common-secondary-bg">
            <div class="common-secondary-title"></div>
            菜单基本信息
          </div>
          <el-form
            ref="form"
            :model="detail"
            :rules="formRules"
            label-suffix="："
            size="small"
            status-icon
            label-position="left"
            label-width="auto"
          >
            <div class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="上级菜单">
                  <el-cascader
                    v-model="detail[PROPS.parentId]"
                    class="w-full"
                    clearable
                    filterable
                    placeholder="上级菜单"
                    :options="detailMenuList"
                    :props="{ expandTrigger: 'click', label: 'name', value: 'id', checkStrictly: true }"
                    popper-class="popper-custom popper-custom-1"
                    @change="handleChangeMenu"
                  ></el-cascader>
                </el-form-item>
              </div>
            </div>
            <div v-if="detail[PROPS.type] == 'MENU'" key="0" class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="菜单名称" :prop="PROPS.name">
                  <el-input v-model.trim="detail[PROPS.name]" clearable placeholder="菜单名称" />
                </el-form-item>
              </div>
            </div>
            <div v-if="detail[PROPS.type] == 'BUTTON'" key="1" class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="按钮名称" :prop="PROPS.btnName">
                  <el-input v-model.trim="detail[PROPS.btnName]" clearable placeholder="按钮名称" />
                </el-form-item>
              </div>
            </div>
            <div v-if="detail[PROPS.type] == 'BUTTON'" key="2" class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="按钮标识" :prop="PROPS.btnIdentifying" class="w-full pr-[12px]">
                  <el-input v-model.trim="detail[PROPS.btnIdentifying]" clearable placeholder="按钮标识" />
                </el-form-item>
              </div>
            </div>
            <div v-if="detail[PROPS.type] == 'BUTTON'" class="flex w-full justify-between">
              <el-form-item label="状态" class="w-full">
                <el-select v-model="detail[PROPS.status]" class="w-full" clearable>
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex w-full justify-between">
              <el-form-item label="菜单类型">
                <el-radio-group v-model="detail[PROPS.type]" @input="changeType">
                  <el-radio v-for="(item, index) in menuType" :key="index" :label="item.value">{{
                    item.label
                  }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="flex w-full justify-between">
              <el-form-item v-if="detail[PROPS.type] == 'MENU'" key="3" label="菜单图标" class="w-full">
                <IconPicker v-model="detail[PROPS.icon]"></IconPicker>
              </el-form-item>
            </div>
            <div v-if="detail[PROPS.type] == 'MENU'" key="4">
              <div class="flex w-full justify-between">
                <el-form-item label="排序值" class="w-full">
                  <el-input v-model.trim="detail[PROPS.sort]" clearable placeholder="排序值" />
                </el-form-item>
              </div>
              <div class="flex w-full justify-between">
                <el-form-item label="重定向" class="w-full">
                  <el-input v-model.trim="detail[PROPS.redirect]" clearable placeholder="重定向" />
                </el-form-item>
              </div>

              <div class="flex w-full justify-between">
                <el-form-item label="路由地址" :prop="PROPS.route" class="w-full">
                  <el-input v-model.trim="detail[PROPS.route]" clearable placeholder="路由地址" />
                </el-form-item>
              </div>
              <div class="flex w-full justify-between">
                <el-form-item label="路由参数" :prop="PROPS.parameters" class="w-full">
                  <el-input v-model.trim="detail[PROPS.parameters]" clearable placeholder="路由参数" />
                </el-form-item>
              </div>
              <div class="flex w-full justify-between">
                <el-form-item label="状态" class="w-full" :prop="PROPS.status">
                  <el-select v-model="detail[PROPS.status]" class="w-full" clearable>
                    <el-option
                      v-for="item in statusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="flex w-full justify-between">
                <el-form-item label="是否缓存页面">
                  <el-switch
                    v-model="detail[PROPS.breadcrumb]"
                    active-text=""
                    inactive-text=""
                    :active-value="true"
                    :inactive-value="false"
                  ></el-switch>
                </el-form-item>
              </div>
              <div class="flex w-full justify-between">
                <el-form-item label="是否显示菜单">
                  <el-switch
                    v-model="detail[PROPS.sidebar]"
                    active-text=""
                    inactive-text=""
                    :active-value="true"
                    :inactive-value="false"
                  ></el-switch>
                </el-form-item>
              </div>
              <!-- start -->
              <div class="flex w-full justify-between">
                <el-form-item label="是否首页展示">
                  <el-switch
                    v-model="detail[PROPS.isIndexShow]"
                    active-text=""
                    inactive-text=""
                    :active-value="true"
                    :inactive-value="false"
                  ></el-switch>
                </el-form-item>
              </div>
              <div class="flex w-full justify-between">
                <el-form-item label="功能图标">
                  <FileUploadBtnSingle
                    ref="fileUplad"
                    v-model="detail[PROPS.image]"
                    accept=".jpg,.png,.jpeg"
                    limit="1"
                    placeholder="最多可添加1张图片支持图片格式为jpg、png、jpeg，10M以内"
                  ></FileUploadBtnSingle>
                </el-form-item>
              </div>
              <!-- end -->
            </div>
          </el-form>
        </div>
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="primary" @click="onSubmit">提 交</t-button>
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import config from "../config";
import vModelMixin from "@/mixin/v-model";
import formAddUpdata from "@/mixin/form-add-updata";
import IconPicker from "@/components/IconPicker";
import { convertToTree } from "@/util";
import { systemPermissionDetail, systemPermissionSystem } from "@/api/permission";

export default {
  name: "DetailDrawer",
  components: { IconPicker },
  mixins: [vModelMixin, formAddUpdata],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      statusList: [
        { label: "启用", value: "ENABLE" },
        { label: "禁用", value: "DISABLE" },
      ],
      menuType: [
        { label: "菜单", value: "MENU" },
        { label: "按钮", value: "BUTTON" },
      ],

      detail: {},
      detailMenuList: [],
      ...config,
      formRules: {},
    };
  },
  computed: {},
  methods: {
    async onDrawerOpen() {
      let data;
      if (this.id) {
        data = (await systemPermissionSystem()) || [];
        const d = data.find((f) => f.id == this.id);
        if (d) {
          d.disabled = true;
        }
        this.detail = await systemPermissionDetail({ id: this.id });
        this.detail.image = this.detail.attachment ? [this.detail.attachment] : [];
        // this.$set(this.detail, this.PROPS.status, this.PROPS.status ? "ENABLE" : "DISABLE");
      } else {
        data = await systemPermissionSystem();
        this.$set(this.detail, this.PROPS.type, "MENU");
        this.$set(this.detail, this.PROPS.breadcrumb, true);
        this.$set(this.detail, this.PROPS.sidebar, true);
      }
      console.log(this.detail);
      if (this.detail.type == "BUTTON") {
        //按钮和菜单共用名称name
        this.$set(this.detail, this.PROPS.btnName, this.detail.name);
        this.$set(this.detail, this.PROPS.name, "");
        //防止按钮切换菜单icon组件报错
        this.$set(this.detail, this.PROPS.icon, "");
        this.addRulesMixin([this.PROPS.btnName, this.PROPS.btnIdentifying]);
      } else {
        this.addRulesMixin([this.PROPS.name, this.PROPS.route, this.PROPS.parameters]);
        this.$set(this.formRules, this.PROPS.status, [{ required: true, message: "请选择", trigger: "change" }]);
      }
      this.detailMenuList = convertToTree(data);
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    handleChangeMenu(value) {
      this.detail[this.PROPS.parentId] = value[value.length - 1];
    },
    resetParams(value, arr) {
      const obj = {};
      arr.forEach((item) => {
        obj[item] = value[item];
      });
      return obj;
    },
    changeType(value) {
      const map = {
        BUTTON: () => {
          this.addRulesMixin([this.PROPS.btnName, this.PROPS.btnIdentifying]);
        },
        MENU: () => {
          this.addRulesMixin([this.PROPS.name, this.PROPS.route, this.PROPS.parameters]);
        },
      };
      this.formRules = {};
      map[value]();
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.detail.type == "BUTTON") {
            this.detail[this.PROPS.name] = this.detail[this.PROPS.btnName];
          }
          const list = this.$refs.fileUplad?.fileList;
          if (list) {
            this.detail.attachment = list;
            this.detail.image = list;
            this.detail.imageUrl = list.length > 0 ? list[0]["attUrl"] : "";
          }
          this.$emit("onSubmit", this.detail);
        } else {
          return false;
        }
      });
    },
    onDrawerClosed() {
      this.restForm(this.detail);
    },
    restForm(value) {
      Object.keys(value).forEach((item) => {
        value[item] = "";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.popper-custom {
  .el-cascader-panel {
    .el-cascader-menu {
      .el-radio {
        position: absolute;
        width: 150px;
        height: 100%;
        opacity: 0;

        .el-radio__input {
          .el-radio__inner {
            border: none;
          }
        }

        .el-radio__input.is-checked {
          .el-radio__inner {
            background: none;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.popper-custom-1 {
  .el-cascader-panel {
    .el-cascader-menu {
      .el-radio {
        position: absolute;
        width: 150px;
        height: 100%;
        opacity: 0;

        &.is-disabled {
          color: #c0c4cc;
          cursor: not-allowed;
        }

        .el-radio__input {
          .el-radio__inner {
            border: none;
          }
        }

        .el-radio__input.is-checked {
          .el-radio__inner {
            background: none;
          }
        }
      }
    }
  }
}
</style>
